import React, { Component } from 'react';

class Alert extends Component {

    constructor(props) {
        super(props)
        this.state = {

        }
    }

    onClose = () => {
        const { onClose } = this.props
        if (onClose) {
            onClose()
        }
    }

    render() {
        const { type, show, integral, children, sign } = this.props
        const { img } = this.state
        if (show && type === 'tzjs') {
            return (
                <div className="alert">
                    <div className="alert-content">
                        <div className="alert-img">
                            <img className="alert-elt" src={require('../static/image/alert-tzjs.png')} alt="" />
                            <img className="alert-guang" src={require('../static/image/bg-guang.png')} alt="" />
                        </div>
                        <div className="alert-text">
                            <p>您的成绩为：{integral}分</p>
                            <p>关注微信公众号，每天抽取更多积分</p>
                        </div>
                        <button type="button" onClick={this.onClose} className="close">
                            <img src={require('../static/images/btn-close.png')} alt="" />
                        </button>
                    </div>
                    <div className="alert-mask"></div>
                </div>
            );
        }
        if (show && type === 'error') {
            return (
                <div className="alert">
                    <div className="alert-content">
                        <div className="alert-img">
                            <img className="alert-dacuole" src={require('../static/image/alert-dacuole.png')} alt="" />
                            <img className="alert-guang-plus" src={require('../static/image/bg-guang-plus.png')} alt="" />
                        </div>
                        {/* <div className="alert-text">
                            <p>真可惜答错了</p>
                            <p>继续下一题再接再厉哦！</p>
                        </div> */}
                        <button type="button" onClick={this.onClose} className="close">
                            <img src={require('../static/images/btn-close.png')} alt="" />
                        </button>
                    </div>
                    <div className="alert-mask"></div>
                </div>
            );
        }
        if (show && type === 'success') {
            return (
                <div className="alert">
                    <div className="alert-content">
                        <div className="alert-img">
                            <img className="alert-daduile" src={require('../static/image/alert-daduile.png')} alt="" />
                            <img className="alert-guang-plus" src={require('../static/image/bg-guang-plus.png')} alt="" />
                        </div>
                        <div className="alert-text">
                            <p>恭喜你答对了+10分！</p>
                        </div>
                        <button type="button" onClick={this.onClose} className="close">
                            <img src={require('../static/images/btn-close.png')} alt="" />
                        </button>
                    </div>
                    <div className="alert-mask"></div>
                </div>
            );
        }
        if (show && type === 'end') {
            return (
                // <div className="alert">
                //     <div className="alert-content">
                //         <div className="alert-img">
                //             <img className="alert-dacuole" src={require('../static/image/alert-dacuole.png')} alt="" />
                //             <img className="alert-guang" src={require('../static/image/bg-guang.png')} alt="" />
                //         </div>
                //         <button type="button" onClick={this.onClose} className="close">
                //             <img src={require('../static/images/btn-close.png')} alt="" />
                //         </button>
                //     </div>
                //     <div className="alert-mask"></div>
                // </div>

                <div className="alert">
                    <div className="alert-content">
                        <div className="alert-img">
                            <img className="alert-elt" src={require('../static/image/alert-tzjs.png')} alt="" />
                            <img className="alert-guang" src={require('../static/image/bg-guang.png')} alt="" />
                        </div>
                        <div className="alert-text">
                            <p>您的成绩为：{integral}分</p>
                            <p>关注微信公众号，每天抽取更多积分</p>
                        </div>
                        <button type="button" onClick={this.onClose} className="close">
                            <img src={require('../static/images/btn-close.png')} alt="" />
                        </button>
                    </div>
                    <div className="alert-mask"></div>
                </div>
            );
        }
        if (show && type === 'integral') {
            return (
                <div className="alert">
                    <div className="alert-content">
                        <div className="alert-img">
                            <img className="alert-elt" src={require('../static/image/alert-jfmx.png')} alt="" />
                            <img className="alert-guang" src={require('../static/image/bg-guang.png')} alt="" />
                        </div>
                        <div className=" integral-text">
                            {children}
                        </div>
                        <button type="button" onClick={this.onClose} className="close">
                            <img src={require('../static/images/btn-close.png')} alt="" />
                        </button>
                    </div>
                    <div className="alert-mask"></div>
                </div>
            );
        }
        if (show && type === 'sign') {
            return (
                <div className="alert">
                    <div className="alert-content">
                        <div className="alert-img">
                            <img className="alert-elt" src={require('../static/image/alert-qiandao.png')} alt="" />
                            <img className="alert-guang" src={require('../static/image/bg-guang.png')} alt="" />
                        </div>
                        {
                            sign.day <= 1 ?
                                <div className="sign-text">
                                    <p>连续签到第 {sign.day} 天</p>
                                    <p>连续签到获得更多积分哦</p>
                                </div>
                                :
                                (
                                    <div className="sign-text">
                                        <p>连续签到第 {sign.day} 天</p>
                                        <p>恭喜您获得 {sign.integral} 积分</p>
                                    </div>
                                )
                        }

                        <button type="button" onClick={this.onClose} className="close">
                            <img src={require('../static/images/btn-close.png')} alt="" />
                        </button>
                    </div>
                    <div className="alert-mask"></div>
                </div>
            );
        }
        return null
    }
}


export default Alert;
